<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>商品图片页</title>
<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
</head>
<body>
	<div class="wrap">
		<blockquote class="layui-elem-quote news_search">
			<div class="layui-inline">
				<button type="button" class="layui-btn" id="commodityImg_botton">
				  <i class="layui-icon">&#xe67c;</i>上传图片
				</button>
			</div>
		</blockquote>
		<!--  商品列表表格 -->
		<table class="layui-table" lay-filter="commodityImg_table" id="commodityImg_table" style="margin: 0"></table>
	</div>
	<script src="../../publicjs/jquery-1.8.0.min.js"></script>
	<script src="../../publicjs/smallkingutil.js"></script>
	<script src="../../lib/layui/layui.js"></script>
	<script>
	layui.use(['table', 'upload'], function() {
			var table = layui.table,
				upload = layui.upload;
			var commodityId = commonUtil.getRequestParam("commodityId");
			// 上传商品图片按钮
			var uploadInst = upload.render({
			  elem: '#commodityImg_botton', //绑定元素
			  url: commonUtil.domain() +'/admin/mall/img/upload?commodityId=' + commodityId, //上传接口
			  accept: 'images',
			  size: 10240,
			  done: function(res){
			    //上传完毕回调
				commodityImgTable.refresh();
			  }
			  ,error: function(){
				layer.msg("上传文件失败。");
			  }
			});
			
			// 加载用户数据表格
			 window.commodityImgTable = table.render({
				id:'commodityImgTable',			
				elem:'#commodityImg_table',
				url:commonUtil.domain() +'/admin/mall/img/list', //数据接口
				method:'post',
				page:true, //开启分页
				request:{
					pageName: 'pageNum', // 分页当前页数发给后台的参数名
					limitName: 'pageSize' // 分页每页多少条发给后台的参数名
				},
				where:{
					commodityId: commodityId
				},
				cols:[ [ //表头
				{
					field : '',
					title : '商品图片',
					width : 100,
					templet : "#imgView"
				},{
					field : 'sortCode',
					title : '排序码',
					width : 80,
					edit : 'text'
				},{
					field : 'oper',
					title : '操作',
					width : 120,
					templet: '#oper'
				}]]
			});
			
			// 监听表格点击操作按钮
			table.on('tool(commodityImg_table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				  var data = obj.data; // 获得当前行数据
				  var layEvent = obj.event; // 获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				  var tr = obj.tr; // 获得当前行 tr 的DOM对象
				  if(layEvent === 'delete'){ // 点击表格一行的移除按钮
					 layer.confirm("确定要删除此图片吗？", function(index){
						// 发送ajax请求 删除地区
						var ajaxParam = {
							url : commonUtil.domain() +"/admin/mall/img/delete",
							data : {
								imgId : data.imgId
							}
						}
						ajaxUtil.post(ajaxParam, function(data){
							if(data.code == 200){
								layer.closeAll();
								commodityImgTable.refresh();
							}else{
								layer.msg("删除失败，请联系开发");
							}
						});
					 });
				  }
			});
			// 监听单元格编辑排序码
		  	table.on('edit(commodityImg_table)', function(obj){
			    var value = obj.value, //得到修改后的值
			    data = obj.data, // 得到所在行所有键值
			    field = obj.field; // 得到字段
			    var data = {
			    	imgId : data.imgId,
			    	sortCode : value
			    }
			   	var ajaxParam = {
			    	  url : commonUtil.domain() +'/admin/mall/img/update',
			    	  data : data
			    }
			    ajaxUtil.post(ajaxParam, function(data){
			    	if(data.code == 200){
						commodityImgTable.refresh();
			    	}
			    });
		  	});
			// 刷新表格
			commodityImgTable.refresh = function(data){
				commodityImgTable.reload({
					  where: data
					  ,page: {
					    curr: 1 //重新从第 1 页开始
					  }
				});
			}
	});
	</script>
	<script>
		$(function(){
				commonUtil.setMaxLength(40);
			})
	</script>
	<script type="text/html" id="imgView">
		<img width="100" height="100" src="{{ commonUtil.hostName() + d.imgViewPath }}"  alt="无图" />
	</script>
	<script type="text/html" id="oper">
  		<a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
	</script>
</body>
</html>